﻿@page "/Emoji"
@using FluentUI.Demo.Shared.Pages.Emoji.Examples;

<h1>Emoji</h1>

<p>
    The <a title="Fluent Emoji" href="https://github.com/microsoft/fluentui-emoji" target="_blank" rel="noopener">Fluent Emoji</a>
    are a (still growing) collection of familiar, friendly, and modern emoji from Microsoft. At the moment there are over 1500 distinct emoji
    available in color, flat and high contrast styles and 6 different skintones (where applicable) divided in 9 groups. In total the
    collections consists of well over 13k emoji in SVG format.
</p>
<p>
    This <a href="https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Emoji" target="_blank">FluentUI Emoji NuGet package</a>
    contains all these emoji, which you can access directly in your projects.
    To use them, simply reference this package in your project.
</p>
<p>
    You can use any of these emoji by levaraging the <code>&lt;FluentEmoji&gt;</code> component. See below for the parameters and examples. There is
    also a search capability available on this page which allows you to browse through all the available emoji.
</p>

<h2 id="overview">Overview</h2>

<DemoSection Component="typeof(EmojiDefault)" Title="Emoji samples">
    <Description>
        You can choose a predefined Emoji.
    </Description>
</DemoSection>

<DemoSection Component="typeof(EmojiDifferentSizes)" Title="Different sizes">
    <Description>
        You can specify a custom size by setting the Width to a value anywhere between 32 - 1024px, though we suggest scaling on sizes of 32 so 32, 64, ... to get the best result.
    </Description>
</DemoSection>

<h2>Explore Emojis</h2>

<EmojiExplorer />
<br />
<br />

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentEmoji<>)" InstanceTypes="@(new[] {typeof(Emoji)})" GenericLabel="Emoji"></ApiDocumentation>